<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
<div id="myApp">
    <p>{{message}}</p>
    <p>num = {{num}}</p>
    <input type="text" v-model="num">
    <form action="">
        <!-- 统一使用 v-model 绑定数据 -->
        <input type="text">
        <input type="password" v-model="num">
        <input type="number" v-model="num">
        <input type="tel">
        <input type="radio">
        <input type="checkbox">
        <input type="submit">
        <input type="reset">
        <input type="time">
        <input type="datetime-local">
        <select name="" id="">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <textarea></textarea>
    </form>
</div>

<div id="app">
    <!-- 双括号内可以调用js代码，但是必须以变量名开头 -->
    <!-- v-html必须在html标签里面作为属性写出来，而且只能写在普通双标签中，单标签元素或者表单元素都不能使用 -->
    <p v-html="message"></p>
    <p>{{message.toUpperCase().split("").reverse().join("")}}</p>
    <input type="text" v-model="message">
    <p>{{num +1 }}</p>
</div>

<script>
    // 普通元素 {{}}
    // 表单元素
    var vm = Vue.createApp({
        data() {
            return {
                message: "11111111",
                num: 0
            }
        },
        mounted() {
            //     会在vue加载完html完成后，自动执行这里的代码
            //     vm.$el,vm.$el.parentElement app标签本身
            setInterval(() => {
                // 操作data里面的数据，都用this
                this.num = this.num + 1
                if (this.num > 10) {
                    this.num = 0
                }
            }, 1000)
        },
    }).mount('#myApp')

    var v2 = Vue.createApp({
        data(){
            return{
                 message: `<img src="imgs/1.jpg">`,
                 num: 1
            }
        }
    }).mount("#app")
</script>
</body>
</html>